<template>
	<view class="one">
		<view class="one-box">
		<!-- 	<uni-section title="身份证人像面照片" type="line">
				<view class="t-section">
					<view class="s-box">
						<view style="display: inline-block;" @click="upImag(1)">
							<view v-if="data.approveImg" class="picker-img1">
								<image mode="widthFix" :src="data.approveImg" style="width: 100%;" ></image>
							</view>
							<view v-else class="picker-img">
								<image class="main-img" :src="imgUrl" mode="aspectFit"></image>
								<view class="main-text"><uni-icons type="camera"></uni-icons><text class="t-text">点击上传身份证人相面图片</text></view>
							</view>
						</view>
					</view>
				</view>	
			</uni-section> -->
			<uni-section title="信息认证" type="line" >
				<view class="t-section">
					<uni-forms ref="customForm" :recruits="customrecruits" :modelValue="forData" labelWidth="80">
						<uni-forms-item label="姓名" required name="real_name">
							<uni-easyinput  :clearable="false" :input-border="false" v-model="forData.real_name" placeholder="请上传真实姓名" style="flex:1"/>
						</uni-forms-item>
						<uni-forms-item label="身份证号" required name="identity_card">
							<uni-easyinput  :clearable="false" :input-border="false"  v-model="forData.identity_card" placeholder="请上传身份证号" style="flex:1"/>
						</uni-forms-item>
						<uni-forms-item label="手机号" required name="phone">
							<uni-easyinput  :clearable="false" :input-border="false"  v-model="forData.phone" placeholder="请上传手机号" style="flex:1"/>
						</uni-forms-item>
<!-- 						<uni-forms-item label="性别" required name="gender">
 							<uni-easyinput  :clearable="false" :input-border="false" type="number" v-model="ageTree[forData.gender].name" placeholder="请上传证件识别性别" style="flex:1"/>
							<picker @change="bindPickerChange" :value="forData.gender" :range="ageTree" range-key="name">
								<view v-if="ageTree[forData.gender].name" class="uni-input">{{ageTree[forData.gender].name || ''}}</view>
								<view v-else class="uni-input1">请选择性别</view>
							</picker>
						</uni-forms-item> -->
<!-- 						<uni-forms-item label="详细地址" required name="address">
							<uni-easyinput :clearable="false" :inputBorder="false" v-model="forData.address" placeholder="请点击右侧图标获取位置" trim="both" style="flex:1;order:1;"/>
							<uni-icons type="location-filled" :color="valiFormData.road == ''?'#999999':'#D8EEFC'" :size="'56r'" style="order: 0;padding-left: 10rpx;" @click="getAddress"/>
						</uni-forms-item>
						<uni-forms-item label="经度" required name="user_longitude" style="display: none;">
							<uni-easyinput :clearable="false" :inputBorder="false" v-model="valiFormData.user_longitude" placeholder="请输入经度" trim="both" />
						</uni-forms-item>
						<uni-forms-item label="纬度  " required name="user_latitude" style="display: none;">
							<uni-easyinput :clearable="false" :inputBorder="false" v-model="valiFormData.user_latitude" placeholder="请输入纬度" trim="both" />
						</uni-forms-item>
						<uni-forms-item label="身份证正面" required name="identity_card_front" style="display: none;">
							<uni-easyinput :disabled="true" :clearable="false" :inputBorder="false" v-model="valiFormData.identity_card_front" placeholder="请输入身份证正面" trim="both" />
						</uni-forms-item>
						<uni-forms-item label="形象照" required name="avatar" style="display: none;">
							<uni-easyinput :disabled="true" :clearable="false" :inputBorder="false" v-model="valiFormData.avatar" placeholder="请输入形象照" trim="both" />
						</uni-forms-item> -->
					</uni-forms>
				</view>
			</uni-section>
<!-- 			<uni-section title="形象照片" type="line">
				<view class="t-section">
					<view class="s-box">
						<!-- <text class="s-title">形象照片</text>
						<view style="display: inline-block;" @click="upImag(2)">
							<view v-if="data.uImg" class="picker-img3">
								<image mode="widthFix" :src="data.uImg" style="width: 100%;" ></image>
							</view>
							<view v-else class="picker-img2">
								<image class="main-img" :src="imgUrl" mode="heightFix"></image>
								<view class="main-text"><uni-icons type="camera"></uni-icons><text class="t-text">点击上传形象照片</text></view>
							</view>
						</view>
					</view>
				</view>
			</uni-section> -->
		</view>
		<view class="s-but">
			<button class="but" plain @click="inClick('customForm')">提交</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				imgUrl:`${getApp().globalData.imgScr}bj/shenfenzheng.png`,
				data:{ // 回显数据
					approveImg:'', // 身份证正面
					uImg:'', // 个人形象照
				},
				 cleaningData: {},
				forData:{
					real_name:'', // 真实姓名
					identity_card:'', // 身份证号
					phone:'',
					gender:'', // 性别
					is_cleaner:1,
					cleaner_status:1
				},
				ageTree:[{name:'男'},{name: '女'}],
				// 自定义表单校验规则
				customrecruits: { 
					real_name: {
						recruits: [{
							required: true,
							errorMessage: '姓名不能为空'
						}]
					},
					identity_card: {
						recruits: [{
							required: true,
							errorMessage: '身份证号不能为空'
						}]
					},
					gender: {
						recruits: [{
							required: true,
							errorMessage: '性别不能为空'
						}]
					},
					// address: {
					// 	recruits: [{
					// 		required: true,
					// 		errorMessage: '居住地址不能为空'
					// 	}]
					// },
					// user_longitude: {
					// 	recruits: [{
					// 		required: true,
					// 		errorMessage: '请在地图上选择居住地址大概范围'
					// 	}]
					// },
					// user_latitude: {
					// 	recruits: [{
					// 		required: true,
					// 		errorMessage: '请在地图上选择居住地址大概范围'
					// 	}]
					// },
					identity_card_front: {
						recruits: [{
							required: true,
							errorMessage: '请上传身份证'
						}]
					},
					// avatar: {
					// 	recruits: [{
					// 		required: true,
					// 		errorMessage: '请上传形象照片'
					// 	}]
					// }
				}
			}
		},
		onLoad() {
			if (uni.getStorageSync("cleaningData")) this.cleaningData = uni.getStorageSync("cleaningData");
			this.forData.phone = uni.getStorageSync("cleaningData").phone
			getApp().globalData.type = 2
		},
		// onUnload(e){
		// 	console.log('查看返回');
		// uni.removeStorageSync('cleaningData');
		// uni.removeStorageSync('openid');
		// },
		methods: {
			/**
			 * 上传图片
			 */
			async upImag(i) {
				let _this = this
				try{
					let res = await uni.chooseImage()
					if(res[0]) throw new Error(JSON.stringify(res[0]))
					 let tempFilePaths = res[1].tempFilePaths;
					 if(i == 1) _this.data.approveImg = tempFilePaths[0]
					 if(i == 2) _this.data.uImg = tempFilePaths[0]
					 uni.showLoading({
					 	title: '图片上传中....',
						mask:true,
					 });
					 let rep = await uni.uploadFile({
				            // url: 'https://www.zhuoxianrenli.cn/index/hotelindex/uploadImage', //图片上传接口
				            url: `${getApp().globalData.url}index/hotelindex/uploadImage`, //图片上传接口
				            filePath: tempFilePaths[0],
				            name: 'file',
							header: {
							"Content-Type": "multipart/form-data",
							},
						})
					console.log('rep ==========>',rep);
					// 根据接口具体返回格式   赋值具体对应url
					if(i == 1) {
						this.forData.identity_card_front = JSON.parse(rep[1].data).file
						// let ImageUrl = 'https://www.zhuoxianrenli.cn/uploads/'+JSON.parse(rep[1].data).file
						let ImageUrl = `${getApp().globalData.url}uploads/`+JSON.parse(rep[1].data).file
						let reo = await this.$http.post('/index/Communal/IDcardocr',{ImageUrl})
						console.log('reo ==========>',reo);
						this.forData.real_name = reo.Name
						this.forData.identity_card = reo.IdNum
						this.forData.gender = reo.Sex == '男'?1:2
					}else{
						 this.forData.avatar = JSON.parse(rep[1].data).file
					}
					uni.hideLoading()
				}catch(e){
					console.log('e ==========>',e);
					uni.hideLoading()
					//TODO handle the exception
					if(e.message && JSON.parse(e.message)) {
						// 图片取消上传
					}else {
						uni.showToast({
							title:e.errMsg,
							icon:"none"
						})
					}
				}
			},
			/**
			 * 获取位置
			 */
			async getAddress() {
				let _this = this
				try{
					let reo = await uni.authorize({scope: 'scope.userLocation'})
					let res = await uni.chooseLocation()
					if(res[0]) throw new Error(JSON.stringify(res[0]))
					this.forData.user_longitude = res[1].longitude // 获取经度
					this.forData.user_latitude = res[1].latitude // 获取纬度
					this.forData.address = res[1].name == ''?res[1].address:res[1].name // 获取详细地址
				}catch(e){
					// console.log();
					// //TODO handle the exception
					// if(e.message && JSON.parse(e.message)) {
					// 	uni.showToast({
					// 		title:JSON.parse(e.message).errMsg,
					// 		icon:"none"
					// 	})
					// }else {
					// 	uni.showToast({
					// 		title:e.errMsg,
					// 		icon:"none"
					// 	})
					// }
				}
				
			},
			/**
			 * 性别发生变化后触发
			 */
			bindPickerChange(e) {
				this.forData.gender = e.detail.value
			},
			/**
			 * 提交数据时触发
			 * @param {Object} ref 当前表单的ref
			 */
			async inClick (ref) {
				
		
				 try{
					let res = await this.$refs[ref].validate()
					
					let data = await this.$http.post('/index/Login/update_userinfo',this.forData)
						console.log(data);
					if(data == 1){
						
						// uni.removeStorageSync('cleaningData');
						uni.showToast({
							title: '认证信息已提交,认证通过后方可使用！',
							icon:"none",
							duration:3000,
							success() {
								setTimeout(()=>{
									// uni.removeStorageSync('cleaningData');
									// uni.removeStorageSync('openid');
									// uni.navigateTo({
									// 	url:"/cleaningAdmin/home/home"
									// })
									uni.navigateBack({
										delta: 1
									});
								},3000)
							}
						})
					}



					
				}catch(e){
					//TODO handle the exception
					if(e.statusCode == undefined){
						uni.showToast({
							title: e[0].errorMessage ?? '提交失败',
							icon:"none"
						})
					}else{
						uni.showToast({
							title: e.errMsg,
							icon:"none"
						})
					}
				}
				
			}
		}
	}
</script>

<style lang="scss">
.one {
	box-sizing: border-box;
	width: 100%;
	height: 100%;
	padding: 20rpx;
	.one-box {
		box-sizing: border-box;
		width: 100%;
		height: 100%;
		background-color: #FFFFFF;
		border-radius: 20rpx;
		padding:20rpx 40rpx;
		margin-bottom: 20rpx;
		.uni-section {
			margin-bottom: 40rpx;
			.uni-section-header {
				padding: 0 0 32rpx;
				.uni-section__head {
					.line {
						width: 4rpx;
						border-radius: 2rpx;
						background-color: #54E58D;
					}
					.uni-section__content {
						font-size: 28rpx;
						font-weight: 600;
						color: #333333;
					}
				}
			}
			.t-section {
				display: flex;
				flex-direction: column;
				margin-bottom: 20rpx;
				.vue-ref {
					.uni-forms-item__content {
						flex-direction: row-reverse;
					}
					.uni-combox {
						padding: 0;
					}
					.uni-input,
					.uni-easyinput__content-input,
					.uni-combox__input,
					.uni-date__x-input {
						// font-size: 26rpx;
						// font-weight: 600;
						color: #333333;
						text-align: right;
						z-index: 0;
					}
					.uni-input1,
					.uni-easyinput__placeholder-class,
					.uni-combox__input-plac {
						// font-size: 24rpx;
						// font-weight: 400;
						color:rgba($color: #000000, $alpha: 0.7);
					}
					.uni-forms-item__content {
						display: flex;
						align-items: center;
					}
				}
				.s-box {
					display: flex;
					flex-direction: column;
					.s-title {
						font-size: 23rpx;
						font-weight: 600;
						color: #333333;
						margin-bottom: 34rpx;
					}
					
					.picker-img {
						position: relative;
						display: flex;
						box-sizing: border-box;
						width: 100%;
						overflow: hidden;
						.main-img {
							height: 330rpx;
							margin-bottom: 10rpx;
						}
						.main-text {
							position: absolute;
							bottom: 20rpx;
							left: 50%;
							transform: translateX(-50%);
							display: flex;
							align-items: center;
							.uni-icons {
								font-size: 40rpx!important;
							}
							.t-text {
								font-size: 24rpx;
								font-weight: 500;
								color: #333333;
								margin-left: 10rpx;
								white-space: nowrap;
							}
						}
					}
					.picker-img1 {
						height: 330rpx;
						display: flex;
						justify-content: center;
						align-items: center;
						overflow: hidden;
					}
					.picker-img2 {
						position: relative;
						display: flex;
						align-items: center;
						justify-content: center;
						width: 330rpx;
						height: 330rpx;
						overflow: hidden;
						.main-img {
							height: 330rpx;
							margin-bottom: 10rpx;
						}
						.main-text {
							position: absolute;
							bottom: 20rpx;
							left: 50%;
							transform: translateX(-50%);
							display: flex;
							align-items: center;
							.uni-icons {
								font-size: 40rpx!important;
							}
							.t-text {
								font-size: 24rpx;
								font-weight: 500;
								color: #333333;
								margin-left: 10rpx;
								white-space: nowrap;
							}
						}
					}
					.picker-img3 {
						display: flex;
						justify-content: center;
						align-items: center;
						width: 330rpx;
						height: 330rpx;
						overflow: hidden;
					}
				}
			}
		}
	}
	.s-but {
		margin: 30rpx 0 0;
		.but {
			background: linear-gradient(-90deg, #8dc9f1, #d8eefc);
			border-radius: 40rpx;
			line-height: 80rpx;
			font-size: 34rpx;
			font-weight: 500;
			color: #FFFFFF;
			border: 0;
		}
	}
}
</style>
